<template>
  <view class="orderDetail">
    <view class="nav_bar">
      <u-icon
        class="back_icon"
        @click="goBack"
        name="arrow-left"
        size="19"
      ></u-icon>
    </view>
    <view class="goods-detail">
      <view class="goods-card">
        <view class="goods-img">
          <swiper autoplay circular :current="currentIndex" @change="change">
            <swiper-item v-for="item in goodsDetail.goodsImg" :key="item">
              <image :src="imageUrl + item.url" mode="scaleToFill" />
            </swiper-item>
          </swiper>
          <view class="dots">
            {{ currentIndex + 1 }} / {{ goodsDetail.goodsImg.length }}
          </view>
        </view>
        <view class="goods">
          <view class="goods-price">
            <text class="price">{{ goodsDetail.goodsPrice }}</text>
            <text class="vip_price">{{ goodsDetail.goodsVipPrice }}</text>
          </view>
          <view class="goods-name">{{ goodsDetail.goodsName }}</view>
          <view class="goods-sku">
            <view class="title">规格</view>
            <view class="value">
              <view class="text">请选择</view>
              <u-icon name="arrow-right" size="19"></u-icon>
            </view>
          </view>
        </view>
      </view>
      <view class="line">
        <u-divider lineColor="#adadad" text="商品详情"></u-divider>
      </view>
      <view class="goods-details">
        <u-parse :content="goodsDetail.goodsDetails"></u-parse>
      </view>
    </view>
    <!-- 为您推荐 -->
    <view class="recommend">
      <view class="recommend_tit">为您推荐</view>
      <goods-list :list="recommendList"></goods-list>
    </view>
    <!-- 底部 -->
    <view class="footer">
      <view class="footer-left">
        <view class="footer-left-fx" @click="goShare">
          <image src="/static/home/fx.png" mode="widthFix" />
          <text>分享</text>
        </view>
        <view class="footer-left-sc" @click="goLike">
          <image
            :src="
              like
                ? imageUrl + '/static/home/like.png'
                : imageUrl + '/static/home/ulike.png'
            "
            mode="widthFix"
          />
          <text>收藏</text>
        </view>
      </view>
      <view class="footer-right">
        <button class="footer-right-btn addCart">加入购物车</button>
        <button class="footer-right-btn buy" @click="goBuy">立即购买</button>
      </view>
    </view>
    <!-- 分享 -->
    <view class="share" v-if="showShare">
      <view class="share-bg" @click="closeShare"></view>
      <view class="share-content" v-if="!showPoup">
        <view class="share-haibao">
          <button class="share-haibao-btn" @click="haibao">
            <image
              :src="imageUrl + '/static/home/haibao.png'"
              mode="scaleToFill"
            />
            <view class="share-haibao-text" style="fonst-size: 24rpx">
              产品海报
            </view>
          </button>
        </view>
        <view class="share-weixin">
          <button class="share-weixin-btn" open-type="share">
            <image
              :src="imageUrl + '/static/home/weixin.png'"
              mode="scaleToFill"
            />
            <view class="share-weixin-text" style="fonst-size: 24rpx">
              微信好友
            </view>
          </button>
        </view>
      </view>
    </view>
    <u-popup :show="showPoup" mode="center" @close="close" @open="open">
      <view class="popup">
        <image
          class="popup-img"
          :src="imageUrl + goodsDetail.goodsImg[0].url"
          mode="widthFix"
        />
        <view class="content">
          <view class="left">
            <view class="name line-clamp-2">{{ goodsDetail.goodsName }}</view>
            <view class="price">{{ goodsDetail.goodsPrice }}</view>
          </view>
          <image src="/static/home/2.png" mode="scaleToFill" />
        </view>
      </view>
    </u-popup>
    <view class="save" v-if="showPoup">长按图片保存</view>
  </view>
</template>
<script>
export default {
  props: {},
  data() {
    return {
      imageUrl: "",
      currentIndex: 0,
      loadData: {},
      like: false,
      showShare: false,
      showPoup: false,
      goodsDetail: {
        goodsImg: [
          {
            url: "/static/home/shop1.jpg",
          },
          {
            url: "/static/home/shop2.jpg",
          },
          {
            url: "/static/home/shop1.jpg",
          },
        ],
        goodsName:
          "环球黑色板鞋女2024新款春季原创滑板鞋运动潮流软底休闲面包鞋子",
        goodsPrice: 199,
        goodsVipPrice: 179,
        sku: [],
        goodsCount: 1,
        goodsDetails:
          "<p>这是商品详情,飞跃帆布鞋女2024春季新品厚底百搭复古德训板鞋</p>",
      },
      recommendList: [
        {
          name: "飞跃帆布鞋女2024春季新品厚底百搭复古德训板鞋",
          id: 1,
          price: 199,
          vip_price: 179,
          image: "/static/home/shop1.jpg",
        },
        {
          name: "飞跃帆布鞋女2024春季新品厚底百搭复古德训板鞋",
          id: 2,
          price: 199,
          vip_price: 179,
          image: "/static/home/shop2.jpg",
        },
        {
          name: "飞跃帆布鞋女2024春季新品厚底百搭复古德训板鞋",
          id: 3,
          price: 199,
          vip_price: 179,
          image: "/static/home/shop1.jpg",
        },
        {
          name: "飞跃帆布鞋女2024春季新品厚底百搭复古德训板鞋",
          id: 4,
          price: 199,
          vip_price: 179,
          image: "/static/home/shop2.jpg",
        },
        {
          name: "飞跃帆布鞋女2024春季新品厚底百搭复古德训板鞋",
          id: 5,
          price: 199,
          vip_price: 179,
          image: "/static/home/shop1.jpg",
        },
      ],
    };
  },
  // 分享
  onShareAppMessage() {
    return {
      title: "天扬",
      path: "/pages/index/index",
      imageUrl: this.imageUrl + this.goodsDetail.goodsImg[0].url,
    };
  },
  computed: {},
  watch: {},
  onLoad() {
    uni.request({
      url: "https://th.ascetic.top/api/wanlshop/product/goods?id=22",
      success: (res) => {
        this.loadData = res.data.data;
        console.log("loadData", this.loadData);
      },
    });
  },
  methods: {
    close() {
      this.showPoup = false;
    },
    open() {
      this.showPoup = true;
      this.showShare = false;
    },
    // 点击分享海报
    haibao() {
      this.showPoup = true;
    },
    // 关闭分享
    closeShare() {
      this.showShare = false;
    },
    // 打开分享
    goShare() {
      this.showShare = true;
      console.log("111");
    },
    // 前往购买商品页
    goBuy() {
      uni.navigateTo({
        url: "/subpack/addOrder",
      });
    },
    // swiper切换
    change(e) {
      this.currentIndex = e.detail.current;
    },
    // 点击返回上一页
    goBack() {
      uni.navigateBack();
    },
    // 喜欢
    goLike() {
      this.like = !this.like;
    },
  },
};
</script>
<style lang="scss" scoped>
swiper {
  width: 100%;
  height: 100vw;
  image {
    width: 100%;
    height: 100%;
  }
}
.orderDetail {
  width: 100vw;
  background-color: #f7f7f7;
  .nav_bar {
    width: 100%;
    padding-top: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    position: fixed;
    top: 0;
    z-index: 10;
    /deep/.u-icon {
      margin-left: 20rpx;
      padding: 16rpx;
      color: #333333;
      background: rgba(255, 255, 255, 0.6);
      border-radius: 50%;
    }
  }
  .goods-detail {
    width: 100%;
    .goods-img {
      width: 100%;
      position: relative;
      .dots {
        position: absolute;
        bottom: 20rpx;
        right: 20rpx;
        color: white;
        font-size: 25rpx;
        background: rgba(0, 0, 0, 0.5);
        padding: 6rpx 16rpx;
        border-radius: 40rpx;
      }
    }
    .goods {
      background: white;
      width: 100%;
      padding: 30rpx 20rpx;
      box-sizing: border-box;
      &-price {
        display: flex;
        align-items: center;
        color: #ff0000;
        .price {
          font-size: 24rpx;
        }
        .price::before {
          content: "¥";
          font-size: 24rpx;
        }
        .price::after {
          content: "起";
          font-size: 24rpx;
        }
        .vip_price {
          font-size: 32rpx;
          margin-left: 20rpx;
        }
        .vip_price::before {
          content: "会员价¥";
          margin-right: 5rpx;
          font-size: 24rpx;
        }
        .vip_price::after {
          content: "起";
          margin-left: 5rpx;
          font-size: 24rpx;
        }
      }
      &-name {
        font-size: 30rpx;
        padding: 20rpx 8rpx;
        font-weight: bold;
        color: #333333;
        box-sizing: border-box;
        display: -webkit-box;
        border-bottom: 1px solid #e4e4e4;
      }
      &-sku {
        font-size: 30rpx;
        color: #999999;
        padding: 30rpx 0rpx 0 0;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        .title {
          margin-right: 10rpx;
        }
        .value {
          flex: 1;
          color: #333333;
          margin-left: 10rpx;
          display: flex;
          align-items: center;
          justify-content: space-between;
        }
      }
    }
    .line {
      width: 50%;
      margin: 0 auto;
    }
    .goods-details {
      width: 100%;
      background: white;
      padding: 20rpx;
    }
  }
  .recommend {
    padding: 22rpx 22rpx 140rpx 22rpx;
    padding-bottom: calc(env(safe-area-inset-bottom) + 140rpx);
    .recommend_tit {
      font-size: 30rpx;
      padding: 20rpx 0;
      font-weight: bold;
    }
  }
  .footer {
    width: calc(100% - 20rpx);
    height: 100rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: fixed;
    bottom: 0;
    left: 0;
    background: white;
    padding: 10rpx;
    padding-bottom: env(safe-area-inset-bottom);
    &-left {
      display: flex;
      align-items: center;
      justify-content: space-around;
      width: 220rpx;
      &-fx,
      &-sc {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        font-size: 24rpx;
        image {
          width: 40rpx;
        }
        text {
          margin-top: 5rpx;
          color: #606060;
        }
      }
    }
    &-right {
      display: flex;
      align-items: center;
      justify-content: space-around;
      &-btn {
        width: 220rpx;
        height: 70rpx;
        line-height: 70rpx;
      }
      .addCart {
        font-size: 30rpx;
        background: #efefef;
        border-top-left-radius: 40rpx;
        border-bottom-left-radius: 40rpx;
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
      }
      .buy {
        font-size: 30rpx;
        background: #df4748;
        border-top-right-radius: 40rpx;
        border-bottom-right-radius: 40rpx;
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
        color: white;
      }
      button::after {
        border: none;
      }
    }
  }
  .share {
    width: 100%;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10;
    display: flex;
    flex-direction: column;
    &-bg {
      width: 100%;
      height: calc(100% - 100rpx);
      background-color: rgba(0, 0, 0, 0.5);
    }
    &-content {
      width: 100%;
      height: 100rpx;
      display: flex;
      align-items: center;
      font-size: 24rpx;
      background: white;
      .share-haibao {
        width: 50%;
        height: 100%;
        &-btn {
          width: 100%;
          height: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
          image {
            width: 40rpx;
            height: 40rpx;
            margin-right: 10rpx;
          }
        }
      }
      .share-weixin {
        width: 50%;
        height: 100%;
        &-btn {
          width: 100%;
          height: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
          image {
            width: 40rpx;
            height: 40rpx;
            margin-right: 10rpx;
          }
        }
      }
    }
  }
}
.popup {
  width: 90vw;
  &-img {
    width: 100%;
  }
  .content {
    padding: 10rpx 20rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .left {
      display: flex;
      align-items: end;
      flex-direction: column;
      width: 70%;
      .name {
        line-height: 1.6em;
        font-size: 30rpx;
      }
      .price {
        color: #ff0000;
        font-size: 42rpx;
      }
      .price::before {
        content: "¥";
        font-size: 24rpx;
        margin-right: 10rpx;
      }
    }

    image {
      width: 180rpx;
      height: 180rpx;
    }
  }
}
.line-clamp-2 {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.save{
    z-index: 99999;
    position: absolute;
    bottom: 15vh;
    left: 50%;
    transform: translateX(-50%);
    color: white;
}
/deep/.u-safe-bottom {
  display: none;
}
</style>
